<template>
   <div class="item">
     <van-cell class="tit">
       <span slot="title">订单编号：{{item.orderSn}}</span>
       <van-count-down  v-if="statusObj.status*1===0 && lastTime" millisecond @finish="changeStatus" :time="lastTime" format="mm:ss:SS" />
       <span v-if="item.status ===0 && lastTime<=0">已过期</span>
       <span v-else :class="'color-'+statusObj.status">{{statusObj.title}}</span>
     </van-cell>
     <van-card
        v-for="val in item.orderItemList"
        :key="val.id"
        :num="val.productQuantity"
        tag="标签"
        :desc="val.productAttr"
        :title="val.productName"
        :thumb="val.productPic"
        :origin-price="val.productPrice"
        :price="val.realAmount"
      >
      </van-card>
     
      <div class="bot">
        <div class="pay-amount">
          <span v-if="[1,2,3].includes(statusObj.status*1)">已付金额：￥{{item.payAmount}}</span>
          <span v-if="[0,4].includes(statusObj.status*1)">应付金额：￥{{item.payAmount}}</span>
         
        </div>
        <div>
          <!-- 待付款 -->
          <template v-if="statusObj.status*1 === 0 ">
            <van-button round size="mini" @click="cancelOrder">取消订单</van-button>
            <van-button round size="mini">立即付款</van-button>
          </template>
          <!-- 待发货 -->
          <template v-if="statusObj.status*1 ===  1">
             <van-button round size="mini"  @click="goService">申请售后</van-button>
          </template>
           <!-- 已发货 -->
          <template v-if="statusObj.status*1 ===  2">
            <van-button round size="mini" @click="seeExpress">查看物流</van-button>
            <van-button round size="mini" @click="confirmGetGood">确认收货</van-button>
             <van-button round size="mini" @click="goService">申请售后</van-button>
          </template>
          <!-- 交易完成 -->
          <template v-if="statusObj.status*1 ===  3">
            <!-- 如果没有评价，则提示立即评价 -->
            <van-button round size="mini">立即评价</van-button>
            <!-- 如果评价过，则显示查看评价 -->
            <!-- <van-button round size="mini">查看评价</van-button> -->
            <van-button round size="mini" @click="deleteOrder">删除订单</van-button>
            <van-button round size="mini" @click="goService">申请售后</van-button>
          </template>
          <!-- 交易关闭 -->
          <template v-if="statusObj.status*1 === 4 ">
            <van-button round size="mini">重新购买</van-button>
            <van-button round size="mini" @click="deleteOrder">删除订单</van-button>
          </template>
        </div>
      </div>
   </div>
</template>

<script>
import { typeList } from '../index'
import { cancelUserOrder,confirmReceiveOrder,deleteOrder } from '@/api/order'
//  0 待付款   取消订单   立即付款
//  1 待发货   查看物流  确认收货
//  2 已发货
//  3 交易完成   查看评价   再次购买
//  4 交易关闭  重新购买  删除订单
export default {
  name:'OrderItem',
  props: {
    item: {
      type: Object,
      default: ()=>({})
    },
  },
  data() {
    return {
      typeList
    }
  },
  computed: {
    // 状态对象
    statusObj() {
      return this.typeList.find(val=>val.status*1 === this.item.status*1) 
    },
    // 剩余时长，计算倒计时
    lastTime(){
      if(this.item.status === 0){
        let nowTime = Date.now()
        let cancelTime = new Date(this.item.cancelTime).getTime()
        let last = cancelTime - nowTime
        return last
      }
      return 0
    }
  },
  methods: {
    // 取消订单
    async cancelOrder() {
      await this.$dialog.confirm({title:'提示',message:'确定取消吗'})
      await cancelUserOrder({orderId:this.item.id})
      this.$toast.success('取消成功')
      this.$emit('update',{type:'cancel',id:this.item.id})
    },
    // 查看物流
    seeExpress(){
      this.$toast({ title:'对接第三方平台',icon:'none'})
    },
    // 确认收货
    async confirmGetGood(){
      await confirmReceiveOrder({orderId:this.item.id})
      this.$toast.success('确认成功')
      this.$emit('update',{type:'receive',id:this.item.id})
    },
    // 删除订单
    async deleteOrder(){
      await this.$dialog.confirm({title:'提示',message:'确定删除吗'})
      await deleteOrder({orderId:this.item.id})
      this.$toast.success('删除成功')
      this.$emit('update',{type:'del',id:this.item.id})
    },
    // 修改状态
    changeStatus(){
      this.item.status = 4
    },
    // 售后服务
    goService(){
      this.$store.commit('order/setOrderInfo',this.item)  
      this.$router.push('/service')
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .van-count-down{
  display: inline-block;
  background-color: red;
  color: #fff;
  border-radius: 20px;
  padding: 0 8px;
  margin-right: 10px;
}
.item{
  background-color: #fff;
  margin:10px 0;
  .bot{
    display: flex;
    padding: 16px 32px;
    justify-content: space-between;
    align-items: center;
  }
  .van-cell__title{
    flex: 2;

  }
  .van-cell__value{
    flex: 1;
  }
  .color-0{
    color: #1989fa;
  }
  .color-1{
    color: #ee0a24;
  }
  .color-2{
    color: #07c160;
  }
  .color-3{
    color: #ff976a;
  }
  .color-4{
    color: #aaa;
  }
  .pay-amount{
    font-size: 28px;
  }
}
</style>